<!DOCTYPE html>
<html>
    <head>

		<script>
			window.onload = function() {
				var canvasBare = document.getElementById("canvasBare");
				var ctx = canvasBare.getContext("2d");
				
				// Random 3 numbers up to 100.
				var results = [Math.floor(Math.random()*100), Math.floor(Math.random()*100), Math.floor(Math.random()*100)];
				
				// Store fill colors.
				var colors = ['green', 'red', 'gray'];
				
				// Store column text.
				var text = ['Yes', 'No', 'N/A'];
				
				// Take votes and turn them into percentages.
				var totalVotes = results[0] + results[1] + results[2];
				var percentages = [Math.floor((results[0]/totalVotes)*100), Math.floor((results[1]/totalVotes)*100), Math.floor((results[2]/totalVotes)*100)];
				
				// Set bar width.
				var colWidth = 20;
				var colLocation = 10;
					
				for (var count=0; count<3; count++)
				{
					ctx.fillStyle = colors[count];
					var current = percentages[count];
					
					// Add text at current column, 5 pixels above the top of the bar.
					ctx.fillText(percentages[count], colLocation, canvasBare.height - current - 5);
					
					ctx.fillRect(colLocation, canvasBare.height - current, colWidth, current);
					colLocation += colWidth + 10;
				}
				
				var canvasIndex = document.getElementById("canvasIndex");
				var ctx = canvasIndex.getContext("2d");
				
				// Random 3 numbers up to 100.
				var results = [Math.floor(Math.random()*100), Math.floor(Math.random()*100), Math.floor(Math.random()*100)];
				
				// Store fill colors.
				var colors = ['green', 'red', 'gray'];
				
				// Store column text.
				var text = ['Yes', 'No', 'N/A'];
				
				// Take votes and turn them into percentages.
				var totalVotes = results[0] + results[1] + results[2];
				var percentages = [Math.floor((results[0]/totalVotes)*100), Math.floor((results[1]/totalVotes)*100), Math.floor((results[2]/totalVotes)*100)];
				
				// Set bar width.
				var colWidth = 20;
				var colLocation = 20;
					
				for (var index=10; index<100; index++)
				{
					if(index%10 == 0)
					{
						ctx.fillText(String(index), 2, 100-index);
					}
				}
					
				for (var count=0; count<3; count++)
				{
					ctx.fillStyle = colors[count];
					var current = percentages[count];
					
					// Add text at current column, 5 pixels above the top of the bar.
					ctx.fillText(colors[count], colLocation, canvasIndex.height - current - 5);
					
					ctx.fillRect(colLocation, canvasIndex.height - current, colWidth, current);
					colLocation += colWidth + 10;
				}
				
				var canvasNumbers = document.getElementById("canvasNumbers");
				var ctx = canvasNumbers.getContext("2d");
				
				// Random 3 numbers up to 100.
				var results = [Math.floor(Math.random()*100), Math.floor(Math.random()*100), Math.floor(Math.random()*100)];
				
				// Store fill colors.
				var colors = ['green', 'red', 'gray'];
				
				// Store column text.
				var text = ['Yes', 'No', 'N/A'];
				
				// Take votes and turn them into percentages.
				var totalVotes = results[0] + results[1] + results[2];
				var percentages = [Math.floor((results[0]/totalVotes)*100), Math.floor((results[1]/totalVotes)*100), Math.floor((results[2]/totalVotes)*100)];
				
				// Set bar width.
				var colWidth = 20;
				var colLocation = 20;
					
				for (var index=10; index<100; index++)
				{
					if(index%10 == 0)
					{
						ctx.fillText(String(index), 2, 100-index);
					}
				}
					
				for (var count=0; count<3; count++)
				{
					ctx.fillStyle = colors[count];
					var current = percentages[count];
					
					// Add text at current column, 5 pixels above the top of the bar.
					ctx.fillText(percentages[count], colLocation, canvasNumbers.height - current - 5);
					
					ctx.fillRect(colLocation, canvasNumbers.height - current, colWidth, current);
					colLocation += colWidth + 10;
				}
			};
		</script>
    </head>
    <body>
        <canvas id="canvasBare" width="100" height="100" style="border: black 1px solid"></canvas>
		<canvas id="canvasIndex" width="110" height="100" style="border: black 1px solid"></canvas>
		<canvas id="canvasNumbers" width="110" height="100" style="border: black 1px solid"></canvas>
	</body>
</html>
